<template>
  <div :class="prefixCls">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)"
    >
    </quill-editor>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-super-solution-module'
Quill.register('modules/ImageExtend', ImageExtend)
export default {
   name: 'QuillEditor',
  components: {
    quillEditor,
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-editor-quill',
    },
    // 表单校验用字段
    // eslint-disable-next-line
    value: {
      type: String,
    },
  },
  data() {
    return {
      example: '',
      content: this.value,
      // 富文本框参数设置
      // Rich text box parameter settings
      editorOption: {
        modules: {
          ImageExtend: {
            // 可选参数 是否显示上传进度和提示语
            // Optional parameters. Whether to display upload progress and prompt
            loading: true,
            // 图片参数名
            // Picture parameter name
            name: 'fileList',
            // 可选参数 图片大小，单位为M，1M = 1024kb
            // Optional parameters. Image size, Unit is M
            size: 2,
            // 服务器地址, 如果action为空，则采用base64插入图片
            // Server address, if action is empty, use base64 to insert picture
            action: '/api/file/upload',
            // 可选 可上传的图片格式
            // Optional, uploadable image format
            accept: 'image/jpg, image/png, image/gif, image/jpeg, image/bmp, image/x-icon',
            // response 为一个函数用来获取服务器返回的具体图片地址
            // response is a function to get the specific image address returned by the server
            // 例如服务器返回 {code: 200; data:{ url: 'baidu.com'}}
            // For example, the server returns {code: 200; data:{ url: 'baidu.com'}}
            // 则 return res.data.url
            response: (res) => {
              return res.data
            },
            // 可选参数 设置请求头部
            // Optional parameter. Set request header
            headers: (xhr) => {
              // 比如添加 csrf-token
              // For example, add csrf-token
              xhr.setRequestHeader('X-CSRFToken', 'TestToken')
            },
            // 图片超过大小的回调
            // Callback when the image exceeds the size
            sizeError: () => {
              alert('图片大小超过 1 M')
            },
            // 可选参数 自定义开始上传触发事件
            // Optional parameters. Custom start upload trigger event
            start: () => {},
            // 可选参数 自定义上传结束触发的事件，无论成功或者失败
            // Optional parameters. Customize the event triggered by the end of upload, regardless of success or failure
            end: () => {},
            // 可选参数 上传失败触发的事件
            // Optional parameter. The event triggered by upload failure
            error: () => {},
            // 可选参数  上传成功触发的事件
            // Optional parameter. The event triggered by a successful upload
            success: () => {},
            // 可选参数 选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
            // Optional parameters. Select the picture to trigger. It can also be used to set the header, but there is one more parameter than headers, which can be set formData
            change: (xhr, formData) => {
              console.log(xhr)
              // formData.append('example', 'test')
            },
          },
          toolbar: {
            // container为工具栏，此次引入了全部工具栏，也可自行配置
            // container is a toolbar, all toolbars are introduced this time, and they can also be configured by themselves
            container: container,
            handlers: {
              image: function () {
                // 劫持原来的图片点击按钮事件
                // Hijack the original picture click button event
                QuillWatch.emit(this.quill.id)
              },
            },
          },
        },
      },
    }
  },
  methods: {
    onEditorBlur(quill) {
      // console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
      // console.log('editor focus!', quill)
    },
    onEditorReady(quill) {
      // console.log('editor ready!', quill)
    },
    onEditorChange({ quill, html, text }) {
      // console.log('editor change!',  html)
      this.$emit('change', html)
    },
  },
  watch: {
    value(val) {
      this.content = val
    },
  },
}
</script>

<style lang="less" scoped>
@import url('../index.less');

/* 覆盖 quill 默认边框圆角为 ant 默认圆角，用于统一 ant 组件风格 */
.ant-editor-quill {
  line-height: initial;
  /deep/ .ql-toolbar.ql-snow {
    border-radius: @border-radius-base @border-radius-base 0 0;
  }
  /deep/ .ql-container.ql-snow {
    border-radius: 0 0 @border-radius-base @border-radius-base;
  }
}
</style>
